<template>
	<view class="foot-con">
		<slot name="tips"></slot>
	   <view  class="my-button-con">
		<view
		    v-if="type == 1"
			class="my-button" @click="nextStep">
			  {{btnText}}
		</view>
		<view class="flex-between" v-else-if="type == 2">
              <view  @click="cancel"  class="delete-btn">{{cancelBtnText}}</view>	
			  <view :class="{'disable-btn':disableBtn}"  @click="nextStep" class="btn-type2"> {{btnText}}</view>
		</view>
		<view class="flex-between" v-else-if="type == 3">
		      <view  >
			      <slot name="btnSlot"></slot>
			  </view>	
			  <view :class="{'disable-btn':disableBtn}"  @click="nextStep" class="btn-type3"> {{btnText}}</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props: {
			btnText: {
				type: String,
				default: '下一步'
			},
			cancelBtnText: {
				type: String,
				default: '删 除'
			},
			type: {
				type: Number,
				default: 1
			},
			disableBtn: {
				type: Boolean,
				default:  false
			}
		},
		methods: {
			nextStep() {
				this.$emit('nextStep', true);
			},
			cancel() {
				this.$emit('cancel', true);
			},
		}
	}
	
</script>
<style lang="scss" scoped>
	.foot-con {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			color: #333!important;
			// pointer-events: none;
			box-sizing: border-box;
			z-index: 9;
			.my-button-con {
				height: 130rpx;
				background-color: #fff;
				padding: 22rpx 35rpx;
				box-sizing: border-box;
				box-shadow: 0rpx -6rpx 18rpx 6rpx rgba(0,0,0,0.05);
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				
			    .my-button {
			    	width: 680rpx;
			         height: 79rpx;
					line-height: 79rpx;
			    	text-align: center;
			    	background: #FCE353;
			    	border-radius: 60rpx;
			    	margin: 0 auto;	
					font-weight: 500;
					font-size: 27rpx;
					color: #222222;
					// pointer-events: auto;
			    }
			}
			.delete-btn {
				font-weight: 500;
				font-size: 27rpx;
				color: #797979;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				width: 120rpx;
				
			}
			.btn-type2 {
				width: 536rpx;
				height: 79rpx;
				line-height: 79rpx;
				background: #FCE353;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				text-align: center;
			}
			.btn-type3 {
				width: 290rpx;
				height: 79rpx;
				background: #FCE353;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				line-height: 79rpx;
				text-align: center;
			}
		
			
		}
	    
  	
</style>